<template>
    <div class="container">
        <!-- <div class="header">
            <select name="playSelect" id="status" v-model="selectIndex" @change="selectChange">
                <option :value="v.value" :label="v.label" v-for="(v,i) in playList" :key="i"></option>
            </select>
        </div> -->
        <div class="section">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default{
        name:'home',
        data(){
            return{
                selectIndex:1,
                playList:[
                    {value:1,label:'jmuxer'},
                    {value:2,label:'h264Converter'},
                ],
            }
        },
        methods:{
            selectChange(e){
                console.log(this.selectIndex);
                if(this.selectIndex==1){
                    this.$router.push({path:'./jmuxer'})
                }
                else if(this.selectIndex==2){
                    this.$router.push({path:'./h264Converter'})
                }
            }
        }
    }
</script>
<style>
.header{
    display: flex;
    align-items: center;
}
.header select{
    width: 200px;
    margin: 50px auto;
    font-size: 20px;
}
</style>